<template>
  <div class="process-container" v-loading="loading">
    <div style="padding: 32px 15%">
      <p style="font-size: 22px; font-weight: bold; margin-bottom: 12px">
        我的投递
      </p>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0" style="font-size: 16px">全部</el-menu-item>
        <el-menu-item index="1" style="font-size: 16px">已投递</el-menu-item>
        <el-menu-item index="2" style="font-size: 16px">已查看</el-menu-item>
        <el-menu-item index="3" style="font-size: 16px">面试邀约</el-menu-item>
        <!-- <el-menu-item index="4" style="font-size: 16px">应聘</el-menu-item> -->
        <el-menu-item index="4" style="font-size: 16px">不合适</el-menu-item>
      </el-menu>
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
        "
      >
        <div
          v-for="item in filterProcess"
          @click="$router.push('/info/job/' + item.id)"
          class="job-item"
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              width: 78%;
            "
          >
            <div>
              <el-text type="success" size="large">
                {{ item.processJobVo.name }}
              </el-text>
              <el-text type="danger" size="large" style="margin-left: 12px">
                {{ item.processJobVo.minSalary }}-{{
                  item.processJobVo.maxSalary
                }}K
              </el-text>
              <el-tag>{{ handleProcessStatus(item.status) }}</el-tag>
            </div>
            <div style="margin: 0px 4px">
              <el-tag type="info" style="margin-right: 8px">
                {{ item.processJobVo.tagName }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ item.processJobVo.location }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleEducationEnum(item.processJobVo.eduction) }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleExperienceEnum(item.processJobVo.experience) }}
              </el-tag>
              <el-tag type="info" style="margin-right: 8px">
                {{ handleJobType(item.processJobVo.type) }}
              </el-tag>
            </div>
            <div style="display: flex; align-items: center; margin: 0px 8px">
              <el-avatar
                :size="22"
                shape="square"
                :src="item.processJobVo.companyLogo"
              ></el-avatar>
              <span style="margin-left: 8px">
                {{ item.processJobVo.companyName }}
              </span>
              <el-tag type="info" style="margin-left: 8px">
                {{ item.processJobVo.industryName }}
              </el-tag>
              <el-tag type="info" style="margin-left: 8px">
                {{
                  handleFinancingStage(item.processJobVo.companyFinancingStage)
                }}
              </el-tag>
              <el-tag type="info" style="margin-left: 8px">
                {{ handleScala(item.processJobVo.companyScala) }}
              </el-tag>
            </div>
            <div v-if="item.feedback" style="margin-top: 16px">
              <el-text type="primary" size="large">投递反馈：</el-text>
              <p style="padding: 20px 32px">{{ item.feedback }}</p>
            </div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 78px;
            "
          >
            <el-avatar :src="item.processJobVo.hrAvatar" :size="42" />
            <div class="job-item-hr">
              <p style="padding: 4px 0">{{ item.processJobVo.hrName }}</p>
              <el-text type="info">{{ item.processJobVo.hrJob }}</el-text>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reqGetMyProcess } from '@/api/recruitProcess'
import { RecruitProcessAndJobType } from '@/api/recruitProcess/type'
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import {
  handleEducationEnum,
  handleExperienceEnum,
  handleJobType,
  handleFinancingStage,
  handleScala,
  handleProcessStatus,
} from '@/constant/type'

onMounted(() => {
  getMyProcess()
})

const loading = ref(false)
const activeIndex = ref('0')
const myProcess = ref<RecruitProcessAndJobType[]>([])
const selectStatus = ref(0)

const filterProcess = computed(() => {
  if (selectStatus.value === 0) {
    return myProcess.value
  } else {
    return myProcess.value.filter((item) => {
      if (item.status === selectStatus.value) return true
    })
  }
})

const getMyProcess = async () => {
  loading.value = true
  try {
    const { data } = await reqGetMyProcess()
    myProcess.value = data.data
  } catch (e) {
    ElMessage.error((e as Error).message)
  } finally {
    loading.value = false
  }
}

const handleSelect = (key: string) => {
  selectStatus.value = parseInt(key)
}
</script>
<style scoped lang="scss">
.process-container {
  max-width: 100vw;
  min-width: 1200px;
  background: #dcdcdc8d;
  height: 100%;

  .job-item {
    width: 80%;
    margin: 12px 0px;
    padding: 12px;
    border-radius: 12px;
    background-color: white;
    display: flex;
    justify-content: space-around;
    cursor: pointer;

    .job-item-button {
      display: none;
    }

    .job-item-hr {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
}
</style>
